<section class="content-header" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">联系人</a></li>
        <li class="active">联系人详情</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <form id="formSearch" class="form-horizontal form-search">
            <div class="form-group">
                <!--                <div class="col-md-4 col-sm-6">-->
                <!--                    <label class="control-label  col-xs-4" for="lkmCustId">客户编号:</label>-->
                <!--                    <div class="col-xs-8">-->
                <!--                        <input type="text" class="form-control" placeholder="" id="lkmCustId2">-->

                <!--                    </div>-->
                <!--                </div>-->
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="lkmName">联系人姓名:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" placeholder="" id="lkmName">
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <label class="control-label  col-xs-4" for="lkmMobile">联系人电话:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" placeholder="" id="lkmMobile">
                    </div>
                </div>
                <shiro:hasPermission name="cstLinkman:list">
                    <div class="col-md-1 col-sm-6 " style="text-align:left;">
                        <button type="button" id="btn_query" class="btn btn-info">查询</button>
                    </div>
                </shiro:hasPermission>
            </div>
        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group">
            <shiro:hasPermission name="cstLinkman:add">
                <button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal" data-target="#userModal">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>联系人
                </button>
            </shiro:hasPermission>
            <shiro:hasPermission name="cstLinkman:batchDelete">
                <button id="btn_batch_delete" type="button" class="btn btn-danger">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删出
                </button>
            </shiro:hasPermission>
        </div>
        <table id="table"></table>
    </div>
</section>
<!-- 用户新增模态框 -->
<div id="userModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <!--        user新增按钮页面-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增联系人</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="cstLinkmanForm">
                    <div class="box-body">
<!--                        <div class="form-group" hidden>-->
<!--                            <label class="col-sm-3 control-label">联系人编号<span style="color: red">*</span>:</label>-->
<!--                            <div class="col-sm-8">-->
<!--                                <input name="lkmId" class="form-control" require="必填项" placeholder="">-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="form-group">
                            <label class="col-sm-3 control-label">联系人姓名<span style="color: red">*</span> :</label>
                            <div class="col-sm-8">
                                <input name="lkmName" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">联系人性别 :</label>
                            <div class="col-sm-8">
                                男:<input class="form-control2" style="background-color: chartreuse"  name="lkmGender" checked type="radio" value="男">
                                女:<input class="form-control2" style="border: 1px solid red" name="lkmGender" type="radio" value="女">

                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">联系人职位 :</label>
                            <div class="col-sm-8">
                                <input name="lkmPosition" class="form-control" min="1" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">联系人手机 :</label>
                            <div class="col-sm-8">
                                <input name="lkmMobile" class="form-control" min="11" max="11"   placeholder="">
                            </div>
                        </div>
                        <div class="form-group" hidden>
                            <label class="col-sm-3 control-label">客户编号 </label>
                            <div class="col-sm-8">
                                <input name="lkmCustId" class="form-control" placeholder="" id="lkmCustId"
                                       autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">介绍人 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="lkmCustName" class="form-control" placeholder="" id="lkmCustName"
                                       autocomplete="off">
                                <div class="xlk" id="cusTomerList">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">来源 :</label>
                            <div class="col-sm-8">
                                <select id="lkmMemo" class="form-control" name="lkmMemo">
                                    <option value="微信">微信</option>
                                    <option value="地推">地推</option>
                                    <option value="朋友圈">朋友圈</option>
                                    <option value="抖音">抖音</option>
                                    <option value="快手">快手</option>
                                    <option value="推荐">推荐</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="saveUser" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--&lt;!&ndash; 用户详情模态框 &ndash;&gt;-->
<div id="userDetailModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">用户信息</h4>
            </div>
            <div class="modal-body">
                <div id="userOpenWindow">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var editFlag = "[[${@perms.hasPerm('cstLinkman:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('cstLinkman:delete')}]]";
    // var assignRoleFlag = "[[${@perms.hasPerm('user:assignRole')}]]";
    var idsStr;//批量用户id
    // var roleIdStr;//分配的角色
    // var selectRoleIds;
    var userIdChecked;
    // var loadRoleCount = 0;
    var columns = [
        {checkbox: true},
       {
            field: 'lkmCustId',
            title: '介绍人编号',
            align: "center"
        },{
            field: 'lkmCustName',
            title: '介绍人姓名',
            align: "center"
        }, {
            field: 'lkmName',
            title: '联系人姓名',
            align: "center"
        }, {
            field: 'lkmGender',
            title: '联系人性别',
            align: "center"
        }, {
            field: 'lkmBirthday',
            title: '联系人生日',
            align: "center"
        }, {
            field: 'lkmPosition',
            title: '联系人职位',
            align: "center",
        },
        {
            field: 'lkmMobile',
            title: '联系人手机',
            align: "center",
        },
        {
            field: 'lkmMemo',
            title: '备注',
            align: "center",
        },
        {
            field: 'operation',
            title: '操作',
            align: "center",
            formatter: function (value,
                                 row, index) {
                console.log(row.lkmId);
                var edit = editFlag == "true" ? '<a class="table-btn table-btn-info" href="javascript:void(0)" onclick="editUser(' + row.id + ')">编辑</a>' : '';
                var del = deleteFlag == "true" ? "<a class='table-btn table-btn-danger' href='javascript:void(0)' onclick='deleteUser(" + row.id +",\""+ row.lkmName +"\" )'>删除</a>" : '';
                return edit + del;
            }
        }];
    var options = {
        id: "#table",
        url: '/cstLinkman/list',
        columns: columns,
        toolbar: '#toolbar',
        showRefresh: true,
        queryParams: queryParams
    }
    Core.initTable(options);
    var custIds;

    const querys=function(name) {
        var param = {
            custName: name,
        }

        var postSs;
        Core.postAjax("/customer/lists", param, function (data) {
            custIds = data.data.list[0].custId;
            console.log(data.data)
            console.log("custIds，" + custIds)
            postSs = data
            return custIds;
            // return 1;
        })
        return postSs
    }

    /*查询用户参数*/
    function queryParams(params) {
        var name = $("#custName").val(),id;
        console.log("name"+name)
        console.log("custId123:"+custIds)
        if (name != null && name != "") {
            id = custIds;
            // id =  id;
            console.log("id:", id)
            console.log("querys:", querys())

        }
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit: params.limit, //页面大小
            offset: params.offset, //页码
            lkmCustId: id,
            lkmName: $("#lkmName").val(),
            lkmMobile: $("#lkmMobile").val(),
        };
        return temp;
    }


    /*查询角色参数*/
    function queryRoleParams(params) {
        var temp = {
            id: userIdChecked
        };
        return temp;
    }

    // /*编辑*/
    function editUser(id) {
        Core.load("#userOpenWindow", "/cstLinkman/edit?id=" + id, function () {
            $("#userDetailModal").modal("show");
        }, 2);
    }

    //
    /*删除*/
    function deleteUser(id) {
        Core.confirm("确定删除该联系人？", function () {
            Core.postAjax("/cstLinkman/delete", {"id": id}, function (data) {
                if (data.status == 200) {
                    Core.refreshTable("#table");
                }
                layer.msg(data.msg);
            }, "get")
        })
    }

    //输入框按键弹起绑定事件
    keyUpPerms = function (custId, username) {
        console.log(custId,username)
        $("#lkmCustName").val(username);
        $("#lkmCustId").val(custId)
        $("#cusTomerList").text("");
    }
    $(function () {
        //输入框按键弹起事件
        //输入框按键弹起事件
        $("#lkmCustName").keyup(function () {
            var name = $("#lkmCustName").val();
            if (name != null && name !== "") {
                var params = {
                    custName: name,
                }
                Core.postAjax("/customer/lists", params, function (data) {
                    console.log(data)
                    console.log(data.data.list)
                    // console.log(data.data.list , 123)

                    var customer = data.data.list;
                    console.log(customer)
                    if (customer.length > 0) {
                        var text = " <ul class='xlk-ul'>";
                        for (var i = 0; i < customer.length; i++) {
                            text = text + "<a href='javascript:void(0)' onclick='keyUpPerms(\"" + customer[i].custId + "\",\"" + customer[i].custName + "\")'><li class='xlk-ul-li'>" + customer[i].custName + "</li></a>"
                        }
                        text = text + "</ul>"
                        $("#cusTomerList").text("");
                        $("#cusTomerList").css({display: "inline"});
                        $("#cusTomerList").append(text);
                    } else {
                        $("#cusTomerList").text("");
                    }
                })
            } else {
                $("#cusTomerList").text("");
                $("#cusTomerList").css({display: "none"});
            }
        })
        /*查询*/
        $("#btn_query").click(function () {
            Core.refreshTable("#table");
        });





        //     /*新增*/
        $("#btn_add").click(function () {
            Core.clearError("#cstLinkmanForm");
        });
        /*批量删除*/
        $("#btn_batch_delete").click(function () {
            var checkedRows = Core.selectMutiData("#table");
            if (checkedRows) {
                Core.confirm("确定删除选中的" + checkedRows.length + "条记录？", function () {
                    idsStr = "";
                    $.each(checkedRows, function (i, item) {
                        idsStr += (item.id + ",");
                    })
                    idsStr = idsStr.substring(0, idsStr.length - 1);
                    Core.postAjax("/cstLinkman/batch/delete", {"idsStr": idsStr}, function (data) {
                        if (data.status == 200) {
                            Core.refreshTable("#table");
                        }
                        layer.msg(data.msg);
                    }, "get")
                })
            }
        });

        /*保存用戶 新增 确定*/
        $("#saveUser").click(function () {
            if (doValidForm(cstLinkmanForm)) {
                Core.mask("#saveUser");
                Core.postAjax("/cstLinkman/add", $("#cstLinkmanForm").serialize(), function (data) {
                    Core.unmask("#saveUser");
                    if (data.status == 200) {
                        $("#userModal").modal("hide");
                        $("#cstLinkmanForm")[0].reset();
                        Core.refreshTable("#table")
                        console.log($("#cstLinkmanForm").serialize())
                        console.log(data)
                    }
                    layer.msg(data.msg);
                })
            }
        });
    });

</script>
<style>
    .xlk {
        position: fixed;
        z-index: 100;
        width: 59.5%;
    }

    .xlk-ul {
        width: 100%;
        margin: 0;
        padding: 0;
        /*font-size: 0;*/
        border-radius: 4px;
        border: 1px solid grey;
        background-color: white;
    }

    .xlk-ul-li {
        width: 100%;
        display: inline-block;
        list-style: none;
    }

    .xlk-ul-li:hover {
        background-color: wheat;
    }
</style>